<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="author" content="m.jd.com">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/base2013.css" charset="gbk" />
    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/my.css?r=2" charset="gbk" />
    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/header.css" charset="gbk" />
    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/product_list.css" charset="gbk" />

    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/search.css" charset="gbk" />
    <script src="/resources/js/jquery-1.11.1.min.js"></script>
    <script src="/resources/js/self.js?r=1"></script>
    <style type="text/css">
        .product-detail{
        background: #eee;
        padding:5px;
        border-radius: 3px;
        height: auto;
        margin-left:2px;
        }
        .product-detail span{
        width: 100%;
        height: 100%;
        display: block;
        text-align: center;

        }
        .product-image{
        width: 100px;
        height: 100px;
        background-size: 100% 100%;
        }

    </style>

</head>
<body>

<div class="search-div">
    <div>
        <input name="queryStr" >
        <button onclick="search();"  class="search-btn"></button>
    </div>
</div>
<div class="common-wrapper" id="mainLayout">
    <!-- 通知中心 -->
    <div id="makeLocation" style="display:none">
        <div class="order-remind" id="orderRemind" style="display: none;">
            <div class="order-remind-flex" id="orderRemindFlex">
                <em class="order-remind-flex-pic-left"></em>
                <em class="order-remind-flex-pic-right" id="closeRemind"></em>
            </div>
        </div>
    </div>
    <!-- 通知中心 结束-->
    <div class="order-tab bdb-1px">

    </div>
    <div id="div_orderlist">
        <div id="data_list" style="position: relative; display: block;">

        </div>
        <div class="no-order" id="customerDataNote" style="display: block;">
        </div>
        <!--end if-->
    </div>
    <div id="div_ordersort" class="o-order mar9 border-1px" style="display: none;">
        <ul id="ordersort-items" class="ordersort-items">

        </ul>
    </div>
    <div class="is-loading" style="height: 35px; padding-top: 2px; display: none;">
        <em></em>
        <span>加载中...</span>
    </div>
    <span class="black-content" id="tip"></span>


</div>
</body>
<script type="text/javascript">
    var _pageFlag = false;
    var params = {
        page: 1,
        size:10
    }
    $().ready(function () {
        var name =  getUrlParam("name");
        $("[name='queryStr']").val(name);
        loadData();
    });
    function loadData(){
        params["queryStr"] = $("[name='queryStr']").val();
        $.ajax({
            url: "/wap/customer/product/queryPage.do",
            data: params,
            dataType: 'json',
            async:false,
            type: 'post',
            success: function (data) {
                if(data.success) {
                    if(data.data.data==null||data.data.data.length==0){
                        $("#data_list").html("");
                        $("#customerDataNote").html("<div class='noorder-pic' style='font-size:0.75rem;color:#bfbfbf;'>" +
                            "<span style='display:block;margin-top:20px;text-align: center;'>没有更多数据了</span></div>");
                    }else{
                        var html = "";
                        $(data.data.data).each(function (index,item) {
                            var brand = item.brand;
                            var brandName = "";
                            if(!isNullOrUndefined(brand)){
                                brandName = "品牌:"+brand.name;
                            }

                            html =  html+"<div class='product-detail'>" +
                                "<div  class='product-image' " +
                                "onclick='showProduct(\""+item.id+"\")' "+
                                "style='background-image: url(\""+item.image+"\")'></div>"+
                                "<span>"+item.name+"</span>"+
                                "<span>"+brandName+"</span>"+
                                "<div style='clear: both'></div>"+
                                "</div>";
                        });
                        $("#data_list").append(html);
                    }
                    if (data.data.pageNo < data.data.pageTotal) {
                        _pageFlag = true;

                    }else{
                        //  $("#customerDataNote").html("<div ><span>没有更多订单了</span></div>");
                    }
                }

            }
        });
    }
    $(window).scroll(function () {
        if (_pageFlag) {
            if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
                _pageFlag = false;
                params['page'] = params['page'] + 1;
                loadData();
            }
        }
    });
    function search() {
        params = {
            page: 1,
            size:10
        };
        $("#data_list").html("");
        loadData();
    }
    function showProduct(id) {
        window.location.href="product_show.html?productId="+id;
    }

</script>
</html>